<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .tab_box{
            width: 600px;
            height: 400px;
            border: 1px solid;
            margin: 100px auto;
            overflow: hidden;
        }
        .tab_top{
            width: 100%;
            height: 70px;
            background: rgba(0,0,0,0.5);
            color: white;
        }
        .tab_top li{
            float: left;
            width: 25%;
            height: 100%;
            line-height: 70px;
            text-align: center;
            cursor: pointer;
        }
        .tab_top li:hover,.tab_top_active{
            background: rgba(0,0,0,0.8);
        }
        .tab_bottom{
            width: 100%;
            height: 330px;
        }
        .tab_bottom li{
            padding: 20px;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: none;
            line-height: 1.5;
            text-indent: 2em;
        }
        .tab_bottom .tab_bottom_active{
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab_box">
        <ul class="tab_top">
            <li class="tab_top_active">UI设计</li>
            <li>WEB全栈</li>
            <li>JAVA</li>
            <li>Python</li>
        </ul>
        <ol class="tab_bottom">
            <li class="tab_bottom_active">
                UI设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。
                UI设计分为实体UI和虚拟UI，互联网常用的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。
            </li>
            <li>
                全栈工程师是指掌握多种技能，胜任前端与后端，能利用多种技能独立完成产品的人。
                项目越大，沟通成本越高，做过项目管理的都知道，项目中的人力是1+1&lt;2的，人越多效率越低。
                因为沟通是需要成本的，不同技术的人各说各话，前端和后端是一定会掐架的。每个人都会为自己的利益而战，
                毫不为己的人是不存在的。而全栈工程师的沟通成本几乎为零，因为各种技术都懂，胸有成竹，自己就全做了。
                即使是在团队协作中，与不同技术人员的沟通也会容易得多，让一个后端和一个前端去沟通，
                那完全是鸡同鸭讲，更不用说设计师与后端了。但如果有一个人懂产品懂设计懂前端懂后端，
                那沟通的结果显然不一样，因为他们讲的，彼此都能听得懂。
            </li>
            <li>
                Java 是由Sun Microsystems公司于1995年5月推出的高级程序设计语言。 
                Java可运行于多个平台,如Windows, Mac OS,及其他多种UNIX版本的系统。
                Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，
                因此Java语言具有功能强大和简单易用两个特征。
            </li>
            <li>
                Python是一种跨平台的计算机程序设计语言。 是一个高层次的结合了解释性、编译性、互动性和面向对象的
                脚本语言。最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越多被用于
                独立的、大型项目的开发。
            </li>
        </ol>
    </div>
    <script>
        var tab_top = document.getElementsByClassName('tab_top')[0]
        var tab_top_li = tab_top.getElementsByTagName('li')
        var tab_bottom = document.getElementsByClassName('tab_bottom')[0]
        var tab_bottom_li = tab_bottom.getElementsByTagName('li')
        // 循环
        for(var i=0;i<tab_top_li.length;i++){
            tab_top_li[i].onclick = function(){
                for(var j=0;j<tab_top_li.length;j++){
                    tab_top_li[j].className = ''
                    tab_bottom_li[j].className = ''
                    if(this == tab_top_li[j]){
                        this.className = 'tab_top_active'
                        tab_bottom_li[j].className = 'tab_bottom_active'
                    }
                }
            }
        }
    </script>
</body>
</html>